{%extends "entrenadores/base.html"%}

{%block extrahead%}
    {% load static %}
    {% get_static_prefix as STATIC_PREFIX %}
    
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css">

    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.tabs.css" type="text/css"/>
    <link rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.core.css" type="text/css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery-ui-1.8.16.custom.css" />
    
    
    <style>
        #arriba  { width: 100%; float: left; height:20px}
        #leftcolumn  { width: 35%; float: left; height:46px}
        #rightcolumn { width: 65%; float: right; height:46px}
        #leftcolumn1  { width: 20%; float: left; height:46px}
        #rightcolumn1 { width: 80%; float: right; height:46px}
    </style>
    
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.core.js"></script>
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.widget.js"></script> 
    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery.ui.tabs.js"></script> 

    <script> 
        $(function() {
            $("#tabs").tabs();
        });
    </script>
    
    <script>
    function selectAll(box) {
        for(var i=0; i<box.length; i++) {
            box.options[i].selected = true;
        }
    }
    </script>

{%endblock%}

{% block breadcrumb %} <a href="/">Inicio</a> > <a href='/entrenadores/'>Entrenadores</a> > {% if not entrenador %}Crear entrenador{% else %} Editar entrenador {% endif %} {% endblock %}

{%block content%}
    <form action="" method="post" enctype='multipart/form-data'>{% csrf_token %}
        <div class='demo'>
            <div id="tabs"> 
                <ul> 
                    <li><a href="#tabs-1">Perfil</a></li> 
                    <li><a href="#tabs-2">Contacto</a></li> 
                    <li><a href="#tabs-3">Deportes</a></li> 
                </ul> 
                <div id="tabs-1">
                    <table width='100%'> <tr> <td>
                        <div>
                            <div align="right" id="arriba"></div>
                            <div>
                                {{form.activo.errors}}
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_activo">Activo: </label></div>
                                <div align="left" id="rightcolumn">{{form.activo}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.nombres.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_nombres">Nombres*: </label></div>
                                <div align="left" id="rightcolumn">{{form.nombres}}</div>
                                </div>
                            </div>
                            
                            <div>
                                <center>{{form.apellidos.errors}}</center>
                                <div>
                                <div align="right" id="leftcolumn"><label for="id_apellidos">Apellidos*: </label></div>
                                <div align="left" id="rightcolumn">{{form.apellidos}}</div>
                                </div>
                            </div>
                            
                        </div> </td> 
                        <td>
                            <div align="center">
                                <img src='{{STATIC_PREFIX}}media/{{url_foto}}' alt='Foto perfil' width='200' height='200'/>
                                <div>
                                    {{form.file.errors}}
                                    <div>{{form.file}}</div>
                                </div>
                            </div>
                        </td>
                    </tr> </table>
                    
                </div>
                
                <div id="tabs-2">
                    
                    <table width='100%'>
                    <div align="right" id="arriba"></div>
                    
                    <div>
                        <center>{{form.telefono_celular.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_telefono_celular">Teléfono celular: </label></div>
                        <div align="left" id="rightcolumn1">{{form.telefono_celular}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.telefono.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_telefono">Teléfono domicilio: </label></div>
                        <div align="left" id="rightcolumn1">{{form.telefono}}</div>
                        </div>
                    </div>
                    
                    <div>
                        <center>{{form.correo_electronico.errors}}</center>
                        <div>
                        <div align="right" id="leftcolumn1"><label for="id_correo_electronico">Correo electrónico: </label></div>
                        <div align="left" id="rightcolumn1">{{form.correo_electronico}}</div>
                        </div>
                    </div>
                    
                    </table>
                </div>
                
                <div id="tabs-3">
                    
                    <!-- agregado para multiselect -->
                    <link type="text/css" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.multiselect.css" rel="stylesheet" />
                    <!--link type="text/css" rel="stylesheet" href="{{ STATIC_PREFIX }}css/jquery/ui/jquery.ui.all.css" /-->
                    <!--script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/jquery-1.7.min.js"></script-->
                    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/jquery-ui-1.8.12.custom.min.js"></script>
                    <script type="text/javascript" src="{{ STATIC_PREFIX }}js/jquery/ui/ui.multiselect.js"></script>

                    <script type="text/javascript">
                        $(function(){
                            $(".multiselect").multiselect();        
                        });
                    </script>
                    <!-- agregado para multiselect -->
                    
                    <select id="tags" name="deportes[]" class="multiselect" multiple="multiple" >
                    {% for deporte in deportes%}
                        {% if  deporte in entrenador.deportes.all %}
                            <option value="{{deporte.pk}}" selected>{{deporte.nombre}}</option>
                        {% else %}
                            <option value="{{deporte.pk}}">{{deporte.nombre}}</option>
                        {% endif %}
                    {% endfor %}
                    </select>
                </div>
                
            </div>
        </div>
        
        <div id='buttons' align='right' class="but-body">
            <input type="submit" class='savebuton'   value="Guardar"                      name='boton_guardar'/>
            <input type="submit" class='savebuton'   value="Guarda e ingresar otro"       name='boton_guardar_y_otro'/>
            <input type="submit" class='savebuton'   value="Guardar y continuar editando" name='boton_guardar_y_editar'/>
            <input type="submit" class='cancelbuton' value="Cancelar"                     name='boton_cancelar'/>
        </div>
    </form>
{%endblock%}
